<template>
  <div class="profile-page">
    <!-- 个人信息 -->
    <div class="user-info">
      <div class="container">
        <div class="row">
          <div class="col-xs-12 col-md-10 offset-md-1">
            <img :src="profile.image" class="user-img" />
            <h4>{{profile.username}}</h4>
            <p>{{profile.bio}}</p>
            <button class="btn btn-sm btn-outline-secondary action-btn" @click="handleFollow">
              <i class="ion-plus-round"></i> &nbsp; {{ profile.following ? 'Unfollow' : 'Follow'}} {{profile.username}}
            </button>
          </div>

        </div>
      </div>
    </div>
    <div class="container">
      <div class="row">
        <div class="col-xs-12 col-md-10 offset-md-1">
          <div class="articles-toggle">
            <ul class="nav nav-pills outline-active">
              <li class="nav-item" style="cursor:pointer;" @click="activeTab = 1">
                <span class="nav-link" :class="{ active: activeTab == 1 }">My Articles</span>
              </li>
              <li class="nav-item" style="cursor:pointer;" @click="activeTab = 2">
                <span class="nav-link" :class="{ active: activeTab == 2 }">Favorited Articles</span>
              </li>
            </ul>
          </div>
          <!-- 文章列表数据加载中展示 -->
          <div class="article-preview" v-if="articleLoading">  Article Loading... </div>
          <!-- 如果没有文章则 -->
          <div class="article-preview" v-if="!articles.length && !articleLoading">  No articles are here... yet. </div>
          <!-- 文章列表 -->
          <template v-show="!articleLoading" v-for="(item, index) in articles">
            <article-item :article='item' :key="index"/>
          </template>
        </div>

      </div>
    </div>
  </div>
</template>
<script>
import { getProfile, followUser, unFollowUser } from '@/api/profile'
import { getArticles } from '@/api/article'
import articleItem from '../home/components/articleItem'
export default {
  middleware: 'authenticated',
  data(){
    return{
      activeTab: 1, // 当前高亮的tab,
      articleLoading: false , // 加载文章的loading
      followDisabled: false, // 关注按钮是否禁用
      articles: [], // 文章列表
    }
  },
  components:{
    articleItem
  },
  async asyncData({ params }){
    // 获取用户数据
    const { profile } = await getProfile(params.username)
    return { profile }
  },
  watch:{
    //如果tab发生变化重新加载文章列表
    activeTab(newvalue, oldvalue){
      this.loadArticles()
    }
  },
  created(){
    this.loadArticles()
  },
  methods:{
    // 加载文章列表数据
    loadArticles(){
      let condition
      if(this.activeTab === 1){
        condition = { author: this.profile.username }
      } else {
        condition = { favorited: this.profile.username }
      }
      this.articleLoading = true
      getArticles(condition).then(res=>{
        res.articles.forEach(article => article.favoriteDisabled = false)
        this.articles = res.articles
      }).finally(()=>{
        this.articleLoading = false
      })
    },
    // 关注用户
    handleFollow(){
      this.followDisabled = true
      if(this.profile.following){
        // 取消关注作者
        unFollowUser(this.profile.username).then(()=>{
          this.profile.following = false
        }).finally(()=>{
          this.followDisabled = false
        })
      } else {
        // 关注作者
        followUser(this.profile.username).then(()=>{
          this.profile.following = true
        }).finally(()=>{
          this.followDisabled = false
        })
      }
    }
  }
}
</script>